<template>
  <!-- <div style="width: 400px"> -->
    <!-- <virtuaTree :data="data" @load="load" ref="tree" @select="select"></virtuaTree> -->
  <!-- </div> -->
  <!-- <div style="width: 800px">
    <bw-form ref="form" :cols="formList" v-model:model="model" ></bw-form>
    <el-button @click="reload">测试</el-button>
  </div> -->
  <el-button @click="show = true">测试</el-button>
  <bw-popup v-model:show="show" @confirm="()=> showChild = true"></bw-popup>
  <bw-popup v-model:show="showChild"></bw-popup>
</template>

<script lang="ts" setup>
import { reactive,ref,onMounted } from "vue";
import virtuaTree from "@/components/system/tree/virtuaTree.vue"
import bwForm from "@/components/system/form/index.vue"
import type { cols } from "@/components/system/form/public";

const form = ref()

const show = ref(false)

const showChild = ref(false)

const reload = () => {
  // form.value
}



onMounted(()=>{
  // setTimeout(()=>{
    // tree.value.findActive(12)
  // },2000)
})

const select = (val:any) => {
  console.log(val)
}

const data = reactive([
  { name: '测试wudhaiuhdiuahduiahwiduhawdhaiudhiauwdhiahdiuahdiuahdiuawhdiuawdhiuawdhiuadh', leaf: true },
  { name: '测试', children:[
    { name: '测试1' },
    { name: '测试2' },
    { name: '测试3' },
    { name: '测试4' },
  ]},
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试10' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试wudhaiuhdiuahduiahwiduhawdhaiudhiauwdhiahdiuahdiuahdiuawhdiuawdhiuawdhiuadh',children:[
    { name: '测试1' },
    { name: '测试2' },
    { name: '测试3' },
    { name: '测试4' },
    { name: '测试31awuidhaiuhdaiuwdhiuahdiuahdwiuahdiuhadw',children:[
    { name: '测试1' },
    { name: '测试2' },
    { name: '测试3' },
    { name: '测试4' },
    { name: '测试41',children:[
    { name: '测试1' },
    { name: '测试2' },
    { name: '测试3' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
  ] },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
  ] },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
    { name: '测试4' },
  ] },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试' },
  { name: '测试12' },
])

const load = (item: any, resolve: any) => {
  console.log(item)
  setTimeout(()=>{
    resolve([{ name: '懒加载进来了1' }, { name: '懒加载进来了2' }])
  },2000)
}

const change = (a:any,b:any,c:any,d:any) =>{
  a.second = 'ccc'
  console.log(a,b,c,d)
}

const formList = reactive<cols[]>([
  { label: '测试地址', prop:'first', type:'floatNum', width: 100,required: true, decimal: 4 },
  { label: '测试地址测', prop:'second', type:'text', width: 45, validate: change },
  { label: '测试地址试试', prop:'second1', type:'date', width: 45 },
  { label: '测试地址试试试', prop:'second2', type:'year', width: 45 },
  { label: '测试地址', prop:'second3', type:'month', width: 45 },
  { label: '测试地址试', prop:'second4', type:'datetimerange', width: 45 },
  { label: '测试地址试试', prop:'second5', type:'textarea', width: 100 },
  { label: '测试地址试试试', prop:'second6', type:'password', width: 45 },
  { label: '测试地址试试', prop:'second7', type:'select', width: 45 },
  { label: '测试地址试试', prop:'second8', type:'select', width: 45 },
  { label: '测试地址试', prop:'second9', type:'select', width: 45 },
  { label: '测试地址', prop:'second10', type:'select', width: 45 },
])



let model = reactive({
  name: 123,
  age: '24',
  second1:"2021-12-01"
});


</script>